<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>vue</title>
	<script src="jquery-3.2.0.min.js"></script>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	
</head>
<body>
	<div id="app">		
		{{message}}	
	</div>
	<br />
	<div id="xuant">
		<span v-bind:title="message">
		 鼠标悬停几秒钟查看此处动态绑定的提示信息！关注.
		</span>
	</div>

	<div id="qiehuan">
		<p v-if="seen">我在这</p>
	</div>

	<div id="app-5">
	<p>{{message}}</p>
	<button v-on:click="reverseMessage">转换位置</button>
	</div>

	<div id="app-6">
  	<p>{{ message }}</p>
  	<input v-model="message">
	</div>
		
	<div id="app-7">
  	<ol>
   	 <!-- 现在我们为每个todo-item提供待办项对象    -->
    	<!-- 待办项对象是变量，即其内容可以是动态的 -->
    	<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
 	 </ol>
	</div>

	<script>
	var app = new Vue({
		el:'#app',
		data:{
			message:'hello world'
		}
	})
	
	var app2 = new Vue({
		el:'#xuant',
		data:{
			message:'页面加载于'+new Date()
		}
	})
	var app3 = new Vue({
		el:'#qiehuan',
		data:{
			seen:true
		}
	})

	var app5 = new Vue({
		el:"#app-5",
		data:{
			message:"haahahahaha..."
		},
		methods:{
			reverseMessage:function(){
				this.message = this.message.split('').reverse().join('')
			}
		}
	})

	var app6 = new Vue({
  		el: '#app-6',
	  	data: {
    		message: 'Hello Vue!'
 	 	}
	})

	Vue.component('todo-item', {
  	props: ['todo'],
  	template: '<li>{{ todo.text }}</li>'
	})
	var app7 = new Vue({
  	el: '#app-7',
  	data: {
    	groceryList: [
      		{ text: '蔬菜' },
      		{ text: '奶酪' },
	      	{ text: '随便其他什么人吃的东西' }
    	     ]
  	}
	})
	</script>
</body>
</html>
